
<!--
 * @author  dumeng
 * desc 问卷统计---查看问题回答情况
-->

<template>
  <div class="answer-list">
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :visible.sync="state"
      title="回答"
      width="900px"
      center
      :before-close="handleCancel"
    >
      <section class="main-table">
        <el-table v-loading="listLoading" :header-cell-style="rowClass" :data="list" stripe style="width: 100%;">
          <el-table-column type="index" label="序号" align="center" width="55" />
          <el-table-column prop="userType" label="用户类型" show-overflow-tooltip />
          <el-table-column prop="userName" label="用户名称" show-overflow-tooltip />
          <el-table-column v-if="type !== 'WJWTLX_04'" prop="myAnswer" label="回答" show-overflow-tooltip />
          <el-table-column v-else prop="prizeImg" label="回答">
            <template slot-scope="scope">
              <el-image
                v-for="(item,index) in scope.row.myAnswer.length > 0 ? scope.row.myAnswer.split(',') : []"
                :key="index"
                :src="view + item"
                :z-index="9999999"
                :preview-src-list="scope.row.myAnswer.split(',').map(item => {return view + item})"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="crtTime" label="回答时间" show-overflow-tooltip />
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getList"
        />
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import { queryPage4answer } from '../api/index'
import Pagination from '@/components/Pagination'

export default {
  name: 'AnswerList',
  directives: { elDragDialog },
  components: { Pagination },
  props: {
    id: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        enterpriseName: ''
      },
      list: [],
      total: 0,
      listLoading: false,
      state: true,
      view: '/API-DOCUMENT/document/file/download?id='
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(obj) {
      this.list = []
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        dataId: this.$route.query.i,
        topicId: this.id
      }
      return new Promise((resolve, reject) => {
        queryPage4answer(query).then(response => {
          this.list = response.data.data.rows
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(error => {
          reject(error)
          this.listLoading = false
        })
      })
    },
    rowClass({ row, rowIndex }) {
      return {
        padding: '5px 0',
        height: '20px',
        background: 'rgba(247,247,248,1)'
      }
    },
    handleCancel() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss">
.answer-list {
  .main-table {
    .el-image {
      display: inline-block;
      width: 50px;
      height: 50px;
      margin-right: 8px;

      .el-image__inner {
        width: 50px;
        height: 50px;
      }

      .el-icon-circle-close {
        color: #fff;
      }
    }

  }
}
</style>
